import React, { useEffect, useState } from 'react'
import { DatePicker, Input, Button, Space, Table, Pagination } from 'antd';
import type { DatePickerProps } from 'antd';

import axios from 'axios';
import { useNavigate } from 'react-router-dom';

// import { Button} from 'antd-mobile'

import {
    RetweetOutlined
} from '@ant-design/icons';
axios.defaults.baseURL = 'http://localhost:3005/';


export default function Department() {
    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };



    // 这是表头
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 200,
        },
        {
            title: '科室人数',
            dataIndex: 'sum',
            key: 'sum',
            width: 150,
        },
        {
            title: '科室介绍',
            dataIndex: 'content',
            key: 'content',
            ellipsis: true,
            width: 800,
        },

        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a href="#" onClick={() => {
                        sessionStorage.setItem('record', JSON.stringify(record));
                        navigate('/Detail');
                    }}>查看</a>

                    <a href="#" onClick={() => {
                        del()
                    }}>删除</a>
                    <a href="#" onClick={() => {
                        xiu()
                    }}>修改</a>

                </Space>
            ),
        },
    ];

    const { Column } = Table
    const navigate = useNavigate();
    const [data, setData] = useState([])
    //分页
    const [pageNow, setPageNow] = useState(1)
    const [pageSize, setPageSize] = useState(2)
    const [total, setTotal] = useState(0)
    const changePage = (pageNow, pageSize) => {
        setPageSize(pageSize)
        setPageNow(pageNow)
    }

    const getData = async () => {
        const res = await axios.get(`medData?pageNow=${pageNow}&pageSize=${pageSize}`)
        console.log(res.data);
        setData(res.data.index)
        setTotal(res.data.total)
    }

    useEffect(() => {
        getData()
    }, [pageNow, pageSize])

    // 删除
    const del = async () => {

        let res = await axios.post(`delete`, {
            id: data[0]._id
        })
        // console.log(res);

        if (res.data.code === 204) {
            getData()
        }

    }
    // 修改
    const xiu = async () => {

    }


    // 刷新页面
    const handlkeClick = () => {
        window.location.reload();
    }

    return (
        <div className='container'>

            <div className='l_box1'>
                <h3>科室管理</h3>
                创建时间：<DatePicker onChange={onChange} />
                选择科室：
                <Input placeholder="按科室介绍内容搜索" style={{ width: 200, marginLeft: 20 }} />
            </div>
            <div className='l_box2'>
                <div className='l_box2-1'>
                    <Button>新增科室</Button>
                    <p onClick={handlkeClick}>刷新<RetweetOutlined /></p>
                </div>

                <div className='l_box2-2'>
                    <Table dataSource={data} columns={columns} pagination={false} />
                    {/* <Column title='名称' key='name' ></Column>
                    <Column title='名称' key='name' ></Column>
                    <Column title='名称' key='name' ></Column>
                    <Column title='名称' key='name' ></Column> */}
                    <Pagination
                        className='l_po'
                        showSizeChanger
                        showQuickJumper
                        current={pageNow}
                        total={total}
                        pageSize={pageSize}
                        onChange={changePage}
                        pageSizeOptions={['2', '4', '8', '10']}


                    // showTotal={(total) => `Total ${total} items`}
                    />
                </div>
            </div>
        </div>
    )
}
